<template>
    <section class="edit-nickname">
      <!--<x-input title="昵称" placeholder="输入昵称" text-align="right" placeholder-align="right"></x-input>-->
      <!-- <x-input  :placeholder="msg" text-align="left" placeholder-align="left" v-model="msg"></x-input> -->
      <group class="per-info">
        <x-input label-width="1.3rem" :placeholder="$t('name')" v-model="bank_realname">
          <span slot="label" style="font-size: .28rem">{{$t('name')}}</span>
        </x-input>
        <x-input label-width="1.3rem" :placeholder="$t('bank num')" v-model="bank_card_num">
          <span slot="label" style="font-size: .28rem">{{$t('bank num')}}</span>
        </x-input>
        <x-input label-width="1.3rem" :placeholder="$t('bankname')" v-model="bank_address">
          <span slot="label" style="font-size: .28rem">{{$t('bankname')}}</span>
        </x-input>
      </group>
      <p style="color: #898989;padding: .4rem 1rem" v-if="query.bankname" >{{$t('want to edit')}}</p>
      <div class="btn-box" v-if="!query.bankname">
        <x-button type="primary" :show-loading="showLoading" v-on:click.native = "change">{{$t('confirm')}}</x-button>
      </div>
    </section>
</template>
<i18n>
  title.editCard:
    en: Edit Card
    zh-CN: 修改银行卡
  bank num:
    en: Bank Number
    zh-CN: 请输入银行卡号
  bankname:
    en: Bank Name
    zh-CN: 请输入开户行地址

</i18n>
<script>
  import {XInput, Group, XButton} from 'vux'

  export default {
    name: 'editCard',
    components: {
      XInput,
      Group,
      XButton
    },
    data () {
      return {
        buttonColor: ['#1D62F0', '#19D5FD'],
        msg: '请输入支付宝号',
        showLoading: false,
        bank_realname: '',
        bank_card_num: '',
        bank_address: '',
        style: 'red'
      }
    },
    created () {
      this.init()
    },
    computed: {
      query () {
        return this.$route.query
      }
    },
    methods: {
      init () {
        this.bank_realname = this.query.realname
        this.bank_card_num = this.query.num
        this.bank_address = this.query.bankname
      },
      change () {
        console.log(localStorage.token)
        let vue = this
        vue.post({
          url: '/api/account/change_bank_info',
          params: {
            token: localStorage.token,
            bank_realname: vue.bank_realname,
            bank_card_num: vue.bank_card_num,
            bank_address: vue.bank_address
          },
          success: function (data) {
            console.log(data)
            if (data.code === 0) {
              vue.$vux.toast.text(data.msg)
            } else {
              vue.$vux.toast.text(data.msg)
              vue.$router.back(-1)
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .weui-cell{
    height: 0.8rem;
  }
  .edit-nickname {
    height: 100%;
    background-color: #fff;
    font-size: 0.28rem;
    input {
      font-size: 0.28rem;
    }
    div {
      font-size: 0.28rem;
    }
    span {
      font-size: 0.28rem;
    }
    .btn-box{
      padding: 6rem 0.3rem 0;
      button{
        background: #179b16;
        color: #fff;
        border: 1px solid #57a94f;
        padding: 0 8px;
        border-radius: 3px;
      }
    }
  }
</style>
